<script lang="ts" setup>
import { h } from 'vue'
import { GENDER_COLOR, GENDER_ICON, PET_GENDER } from "@/const/gender";

interface IProps {
	gender: number;
}

const props = withDefaults(defineProps<IProps>(), {})
const IconItem = () => h(GENDER_ICON[props.gender])
const TextName = () => PET_GENDER[props.gender]
</script>
<template>
	<div :style="`display: inline-flex;align-items: center;color:${GENDER_COLOR[gender]}`">
		<n-icon v-if="gender!==2" style="margin-right: 4px;">
			<IconItem/>
		</n-icon>
		<TextName/>
	</div>
</template>
